<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="admin/head :: head"></div>

    <title>订单表单</title>
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <input type="hidden" name="id" th:value="${order?.id}"/>

        <div class="layui-form-item">
            <h2 class="layui-header">订单信息</h2>
        </div>

        <hr class="layui-bg-red">

        <!-- 上传私人订制订制套餐文件 -->
        <div th:if="${order.type eq 2 or order.orderDetail.videoType eq 4}">
            <h3 class="layui-header">私人定制套餐信息: </h3>
            <img th:if="${order.orderDetail.comboFile ne null}" th:src="${#request.getAttribute('uploadServer') + order.orderDetail.comboFile}">
            <button type="button" class="layui-btn" name="fileupload" id="fileupload">
                <i class="layui-icon">&#xe67c;</i>上传私人定制套餐
            </button>
        </div>

        <hr class="layui-bg-red">

        <!-- 调整价格 -->
        <div>
            <h3 class="layui-header">当前价格: [[${order.totalPrice}]] [[${order.discount != null ? '&nbsp;&nbsp;使用优惠券: ' :
                ''}]] [[${order.discountCoupon?.price}]]</h3>
            <a class="layui-btn layui-btn-sm layui-btn-normal" title="调整价格" href="javascript:;" id="change-price"
               th:attr="data-item-id=${order.id}, data-item-price=${order.totalPrice}">
                <i class="layui-icon">&#xe674;</i> 调整价格
            </a>
        </div>

        <hr class="layui-bg-red">

        <!-- 分配摄影师、编剧 -->
        <div class="layui-form-item">
            <label for="L_photoGrapher" class="layui-form-label">
                摄影师
            </label>
            <div class="layui-input-inline">
                <select class="layui-select" name="photoGrapher" id="L_photoGrapher">
                    <option th:each="item, index:${photoGrapher}" th:value="${item.id}" th:text="${item.nickname}"
                            th:selected="${order.orderDetail ne null and order.orderDetail.photographer eq item.id}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_scriptWriter" class="layui-form-label">
                编剧
            </label>
            <div class="layui-input-inline">
                <select class="layui-select" name="scriptWriter" id="L_scriptWriter">
                    <option th:each="item, index:${scriptWriter}" th:value="${item.id}" th:text="${item.nickname}"
                            th:selected="${order.orderDetail ne null and order.orderDetail.scriptwriter eq item.id}"></option>
                </select>
            </div>
        </div>

        <div>
            <a class="layui-btn layui-btn-sm layui-btn-normal" title="确认分配" href="javascript:;" id="distribution">
                <i class="layui-icon">&#xe605;</i> 确认分配
            </a>
        </div>

        <hr class="layui-bg-red">

        <div class="layui-form-item">
            <label for="L_type" class="layui-form-label">
                订单类型
            </label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux" id="L_type" cus:dict="order-type,${order.type}"></span>
                <span class="layui-form-mid layui-word-aux" th:if="${order.orderDetail.sameStyleId ne null}"
                      th:text="${'同款作品(' + order.orderDetail.sameStyle.name + ')'}"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_location" class="layui-form-label">
                拍摄地：
            </label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux" id="L_location"
                      cus:area="${order.orderDetail.shootingLocation}"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_time" class="layui-form-label">
                拍摄档期：
            </label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux" id="L_time"
                      th:text="${#dates.format(order.orderDetail.shootingStartDate,'yyyy-MM-dd') + '&nbsp;至&nbsp;' + #dates.format(order.orderDetail.shootingEndDate,'yyyy-MM-dd')}"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_production_type" class="layui-form-label">
                作品类型
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <span class="layui-form-mid layui-word-aux" id="L_production_type"
                      cus:dict="video-type,${order.orderDetail.videoType}"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_combo" class="layui-form-label">
                套餐
            </label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux" id="L_combo"
                      th:text="${order.orderDetail.orderCombo?.label}"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_remark" class="layui-form-label">
                备注
            </label>
            <div class="layui-input-inline" style="width: 50%;">
                <span class="layui-form-mid layui-word-aux" id="L_remark" th:text="${order.orderDetail.remark}"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_userInfo" class="layui-form-label">
                用户信息
            </label>
            <div id="L_userInfo" class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux">名字：[[${order.orderUser.name}]]</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux">昵称：[[${order.orderUser.nickname}]]</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux">手机号：[[${order.orderUser.mobile}]]</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux">微信号：[[${order.orderUser.wechat}]]</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux">QQ：[[${order.orderUser.qq}]]</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <span class="layui-form-mid layui-word-aux">Email：[[${order.orderUser.email}]]</span>
            </div>
        </div>


        <div th:if="${order.orderReceipt ne null}">
            <div class="layui-form-item">
                <h2 class="layui-header">发票信息</h2>
            </div>

            <div class="layui-form-item">
                <label for="L_dutyNo" class="layui-form-label">
                    税号
                </label>
                <div class="layui-input-inline">
                    <span class="layui-form-mid layui-word-aux" id="L_dutyNo"
                          th:text="${order.orderReceipt.dutyNo}"></span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_head" class="layui-form-label">
                    发票抬头
                </label>
                <div class="layui-input-inline">
                    <span class="layui-form-mid layui-word-aux" id="L_head"
                          th:text="${order.orderReceipt.title}"></span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_receive" class="layui-form-label">
                    发票收票人
                </label>
                <div class="layui-input-inline">
                    <span class="layui-form-mid layui-word-aux" id="L_receive"
                          th:text="${order.orderReceipt.receiveName}"></span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_postAddr" class="layui-form-label">
                    邮寄地址
                </label>
                <div class="layui-input-inline">
                    <span class="layui-form-mid layui-word-aux" id="L_postAddr"
                          th:text="${order.orderReceipt.postAddress}"></span>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_contactPhone" class="layui-form-label">
                    联系方式
                </label>
                <div class="layui-input-inline">
                    <span class="layui-form-mid layui-word-aux" id="L_contactPhone"
                          th:text="${order.orderReceipt.contactPhone}"></span>
                </div>
            </div>
        </div>

    </form>
</div>

</body>

<script>
    function numeric() {
        if (!(event.keyCode == 46) && !(event.keyCode == 8) && !(event.keyCode == 37) && !(event.keyCode == 39)) {
            if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || (event.keyCode == 110 || event.keyCode == 190))) {
                event.returnValue = false;
            }
        }
    }

    layui.use('upload', function () {
        var upload = layui.upload;

        upload.render({
            elem: '#fileupload',
            url: uploadServer + '/image/lua-lu-upload?',
            accept: 'file',
            field: 'file',
            done: function (res, index, upload) {
                if (res.error == 0) {
                    $.ajax({
                        type: 'post',
                        url: '/admin/order/api/update-combo',
                        data: {
                            orderId: $('input[name="id"]').val(),
                            comboFile: res.url
                        },
                        dataType: 'json',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                        },
                        success: function (result) {
                            if (result.data == Messages.TOF.TRUE) {
                                Messages.TIP.msg(Messages.SUCCESS);
                                location.reload();
                            } else {
                                Messages.TIP.error(result.error)
                                return false;
                            }
                        },
                        error: function (e) {
                            Messages.TIP.error(Messages.ERROR);
                        }
                    })
                }
            },
            error: function (index, upload) {
                
            }
        });
    });


    $(function () {
        $('#change-price').click(function () {
            var _self = this;
            var id = $(_self).attr('data-item-id');
            var prevPrice = $(_self).attr('data-item-price');
            layer.open({
                title: '调整价格',
                content: '调整前: <label name="price">' + prevPrice + '</label><br> 调整后: <input name="changePrice" value="" style="ime-mode: disabled" placeholder="请输入价格, 保留两位小数" onkeydown="numeric();"><br>',
                yes: function (index, layero) {
                    $.ajax({
                        type: 'post',
                        url: '/admin/order/api/update-price',
                        data: {
                            id: id,
                            changePrice: layero.find('input[name="changePrice"]').val(),
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                        },
                        dataType: 'json',
                        success: function (result) {
                            if (result.data == Messages.TOF.TRUE) {
                                Messages.TIP.msg(Messages.SUCCESS);
                                $(_self).prev().text('当前价格: ' + layero.find('input[name="changePrice"]').val());
                            } else {
                                Messages.TIP.error(result.error)
                                return false;
                            }
                        },
                        error: function (e) {
                            Messages.TIP.error(Messages.ERROR);
                        }
                    })

                }
            })

        })

        $('#distribution').click(function () {
            var photoGrapher = $('#L_photoGrapher').val();
            var scriptWriter = $('#L_scriptWriter').val();
            var id = $('input[name="id"]').val();
            $.ajax({
                type: 'post',
                url: '/admin/order/api/distribution',
                data: {
                    photoGrapher: photoGrapher,
                    scriptWriter: scriptWriter,
                    orderId: id
                },
                dataType: 'json',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                },
                success: function (result) {
                    if (result.data == Messages.TOF.TRUE) {
                        Messages.TIP.msg(Messages.SUCCESS);
                    } else {
                        Messages.TIP.error(result.error)
                        return false;
                    }
                },
                error: function (e) {
                    Messages.TIP.error(Messages.ERROR);
                }
            })

        })
    })
</script>

</html>